import React ,{useState,useEffect}from 'react';
import { Routes, Route, NavLink } from 'react-router-dom';
import Archives from './pages/Archives';
import Article from './pages/Article';
import Knowledge from './pages/Knowledge';
import Desc from './pages/Desc';
import { Space } from 'antd';
import {
  TranslationOutlined,
  SkinOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import Top from './components/Top'
import Bottom from './components/Bottom'
//文章
import Alldata from './pages/Articles/Alldata'
import axios from 'axios'
import ArticleTemp from './pages/Articles/ArticleTemp'
import Temp from './pages/Temp'
import Detail from './pages/Detail'

function App() {
  let [category,setCategory] = useState([])
  useEffect(()=>{
    axios.get('/api/category').then(res=>{
      setCategory(res.data.data)
    })
  },[])
  return (
    <div className='App'>
      <header>
        <div className="header">
          <span>
             <NavLink to='/article'>文章</NavLink>
          <NavLink to='/archives'>归档</NavLink>
          <NavLink to='/knowledge'>知识小册</NavLink>
          </span>
         
          <div className="p">
            <span className='span'>
              <Space>
                <TranslationOutlined />
              </Space>
            </span>
            <span className='span'>
              <Space>
                <SkinOutlined />
              </Space>
            </span>
            <span className='span'>
              <Space>
                <SearchOutlined />
              </Space>
            </span>
            <button className='login'>登录</button>
          </div>
        </div>
        
      </header>
      <main>
        <div className="wrap">
          <div className="left">
            <Routes>
              <Route path='/article' element={<Article />}>
                <Route path='/article/alldata' element={<Alldata />}></Route>
                <Route path='/article' element={<Alldata />}></Route>
                {
                  category.map((item:any,index:number)=>{
                    return <Route path={item.value} key={index} element={<ArticleTemp id={item.id} />}></Route>
                  })
                }
              </Route>
              <Route path='/archives' element={<Archives />}></Route>
              <Route path='/knowledge' element={<Knowledge />}></Route>
              <Route path='/page/:id' element={<Temp />}></Route>

              <Route path='/desc/:id' element={<Desc />}></Route>

              <Route path='/detail/:id' element={<Detail />}></Route>


            </Routes>
          </div>
          <div className="right">
            <div className="top">
              <Top></Top>
            </div>
            <div className="bottom">
              <Bottom></Bottom>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default App